<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 冲塔怪
  Date: 2022/5/2
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/left.jsp"%>
<%
    String basePath = request.getScheme()
            +"://"
            + request.getServerName()
            + ":"
            + request.getServerPort()
            + request.getContextPath()
            + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#searchPageBtn").click(function () {
                var pageNo = $("#pn_input").val();
                location.href = "${requestScope.page.url}&pageNo="+pageNo;
            });

            $("#resetPageBtn").click(function () {
                location.href = "good?action=page&pageNo=1";
            });


            $("button.addToCart").click(function () {
                var goodId = $(this).attr("goodId");
                var uId = ${sessionScope.user.id};

                //location.href = "<%=basePath%>cart?action=addItemDB&id="+goodId;
                location.href = "<%=basePath%>cart?action=addItemDB&gid="+goodId+"&uid="+uId;
            });

            $(".img_update").click(function () {
                var goodId = $(this).attr("goodId");
                $(".file").attr("goodId",goodId);
                $(".file").click();
            });
        });


    </script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
        }


        .row{
            margin-left: 7%;
        }
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        .main{
            margin-left: 160px;
        }
        .header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            font-size: 30px;
        }
        .search{
            width: 100%;
            margin-top: 10px;
        }

        .search_0{
            margin-left: 35%;
        }
        .search_price{
            width: 60px;
            height: 25px;
        }
        .search_0_search{
            width: 304px;
            height: 25px;
        }
        .column{
            float: left;
            /*width: 170px;*/
            padding: 10px;
            height: 400px;
            display:flex;
            flex-wrap:wrap;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }


        .pro {
            border:1px solid #ccc;
            height:360px;
        }
        .proImg {
            width:235px;
            height:196px;
            text-align:center;
        }
        .proImg img {
            height:196px;
        }
        .proText {
            margin:10px 10px;
            height:100px;
        }
        h5 {
            font-size:1rem;
            margin:0 auto;
            font-weight:initial;
        }
        .proPrice span {
            font-size:1.2rem;
            font-weight:initial;
            font-style:italic;
        }
        .proBig {
            width:235px;
            margin:15px 15px;
            position:relative;
        }
        .proFrom {
            font-size:0.6rem;
            color:#95989A;
            text-align:right;
            margin-right:10px;
        }
        .proBtn {
            width:235px;
            height:362px;
            background-color:#fff;
            background-color:rgba(255,255,255,0.5);
            position:absolute;
            box-sizing:border-box;
            padding-top:80px;
            margin-top:-362px;
            display:none;
        }
        .proBig:hover .proBtn {
            display:block;
        }
        .btn {
            width:167px;
            height:50px;
            margin:10px auto;
            background-color:#FCDD00;
            display:flex;
            justify-content:center;
            align-items:center;
            box-sizing:border-box;
        }
        .btn:hover {
            border:1px solid #66503B;
        }
        .addToCart{
            background-color: #FCDD00;
            border: none;
            color: black;
            padding: 13px 28px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="header"><h2>商品展示</h2></div>
        <div class="search">
            <div class="search_0">
                <div>
                    <form action="good" method="get">
                        <input type="hidden" name="action" value="pageBySearch">
                        <input class="search_0_search" type="text" name="name" value="${param.name}" placeholder="请输入水果名称"><br><br>
                        <input class="search_price" type="text" name="min" value="${param.min}" placeholder="￥" > -
                        <input class="search_price" type="text" name="max" value="${param.max}" placeholder="￥" > 元
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" value="查询">
                        <input id="resetPageBtn" type="button" value="清空">
                    </form>
                </div>
            </div>
        </div>
        <div  class="row">
            <c:forEach items="${requestScope.page.items}" var="good">
                <div class="column middle">
                    <div class="proBig">
                        <div class="pro">
                            <c:if test="${good.stock gt 0}">
                                <div class="proImg"><img width="235" goodId="${good.id}" src="${pageContext.request.contextPath}/${good.imgPath}"></div>
                            </c:if>
                            <c:if test="${good.stock == 0}">
                                <div class="proImg"><img width="235" goodId="${good.id}"  src="${pageContext.request.contextPath}/img/nogood.jpg"></div>
                            </c:if>
                            <div class="proText">
                                <h5>${good.name}</h5>
                                <p class="proPrice">￥<span>${good.price}</span></p>
                            </div>
                            <div class="proFrom">月销量：${good.sales}<br>库存：${good.stock}</div>
                        </div>
                        <c:if test="${good.stock gt 0}">
                            <div class="proBtn">
                                <div class="btn">
                                    <button goodId="${good.id}" class="addToCart">加入购物车</button>
                                </div>
                            </div>
                        </c:if>
                    </div>

                </div>
            </c:forEach>
        </div>

        <br>
        <div class="footer">
            <!-- 大于第一页，才显示 -->
            <c:if test="${requestScope.page.pageNo > 1}">
                <a href="${requestScope.page.url}&pageNo=1">首页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上一页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">${requestScope.page.pageNo-1}</a>
            </c:if>

            【${requestScope.page.pageNo}】

            <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">${requestScope.page.pageNo+1}</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下一页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageTotal}">末页</a>
            </c:if>
            共${requestScope.page.pageTotal}页 ${requestScope.page.pageTotalCount}条记录
            到第<input name="pn" id="pn_input">
            <input id="searchPageBtn" type="button" value="确定">
        </div>
<%--        <div>--%>
<%--            <form action="/manage/file" encType="multipart/form-data" method="post">--%>
<%--                <input type="file" name="photo" class="file">--%>
<%--                <input type="submit" value="上传">--%>
<%--            </form>--%>
<%--        </div>--%>
    </div>
</body>
</html>
